<template>
  <el-table class="hovertable" :data="tableData" :row-style='rowstyles' style="width: 100%">
    <el-table-column fixed prop="date" label="Date" width="150" />
    <el-table-column prop="name" label="Name" width="120" />
    <el-table-column prop="state" label="State" width="120" />
    <el-table-column prop="city" label="City" width="120" />
    <el-table-column prop="address" label="Address" width="600" />
    <el-table-column prop="zip" label="Zip" width="120" />
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default>
        <el-button text size="small">Detail</el-button>
        <el-button text size="small">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  name: "hovertable",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
          zip: "CA 90036",
          tag: "Home",
        },
        {
          date: "2016-05-02",
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
          zip: "CA 90036",
          tag: "Office",
        },
        {
          date: "2016-05-04",
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
          zip: "CA 90036",
          tag: "Home",
        },
        {
          date: "2016-05-01",
          name: "Tom",
          state: "California",
          city: "Los Angeles",
          address: "No. 189, Grove St, Los Angeles",
          zip: "CA 90036",
          tag: "Office",
        },
      ],
    };
  },
  methods:{
      rowstyles({row,rowIndex}){
            let styleJson = {
                "box-shadow":"-10px 0 10px -10px red inset, 10px 0px 10px -10px red inset,  0px 10px 10px -10px red inset, 0px -10px 10px -10px red inset;"
            };
            return styleJson
      }
  }
};
</script>
 
<style scoped>
.hovertable{
    margin: 100px auto;
    padding: 50px;
}
.hovertable :deep(.el-table__body tr.hover-row>td.el-table__cell){
    /* box-shadow: -0px 0 0px -0px #f5f7fa, 
    0px 0px 0px -0px #f5f7fa,  
    0px 10px 10px -10px red inset, 
    0px -10px 10px -10px red inset;  */
}
.hovertable :deep(.el-table__body-wrapper tr.hover-row){
box-shadow: -0px 0 0px -0px #f5f7fa, 
    0px 0px 0px -0px #f5f7fa,  
    0px 10px 10px -10px red inset, 
    0px -10px 10px -10px red inset;
}

.hovertable :deep(.el-table__body-wrapper tr.hover-row>td.el-table-fixed-column--right){
box-shadow: -0px 0 0px -0px #FFFFFF inset, 
    -10px 0 10px -10px red inset,  
    0px 10px 10px -10px red inset, 
    0px -10px 10px -10px red inset;
        background-color: #fff !important;
}
.hovertable :deep(.el-table__body-wrapper tr.hover-row>td.el-table-fixed-column--left){
    box-shadow: 10px 0 10px -10px red inset, 
    0px 0px 0px 0px #ffffff inset, 
    0px 10px 10px -10px red inset, 
    0px -10px 10px -10px red inset;
    background-color: #fff !important;
}
.hovertable :deep(.el-table__body tr.hover-row>td.el-table__cell){
    background-color: transparent;
}
</style>